<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item>
              <!-- 时间选择 -->
              <el-date-picker
                :placeholder="$t('时间选择')"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                v-model="queryParams.createTime"
                type="date"
                clearable
              />
            </el-form-item>

            <el-form-item>
              <el-select :placeholder="$t('审核状态')" clearable v-model="queryParams.status">
                <!-- 1.未审核 2.已审核 3.取消盘点 -->
                <el-option :label="$t('未审核')" :value="1" />
                <el-option :label="$t('已审核')" :value="2" />
                <el-option :label="$t('取消盘点')" :value="3" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button type="primary" plain size="mini" @click="handleAdd">
          <el-tooltip
            class="item"
            effect="dark"
            :content="$t('创建盘点单会记录所有库位库存，盘点时不要进行出库入库操作')"
            placement="right"
          >
            <i class="el-icon-warning"></i>
          </el-tooltip>
          <!-- 创建 -->
          {{ $t('创建') }}
        </el-button>
      </template>
    </PageSearch>
    <el-table :height="calTableHeight()" v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
      <!-- 类型 -->
      <el-table-column align="center" show-overflow-tooltip prop="type" width="120" :label="$t('类型')">
        <!--
            1.扫码盘点
            2.手动+扫码盘点
       -->
        <template slot-scope="{ row }">
          <span v-if="row.type == 1">{{ $t('扫码盘点') }}</span>
          <span v-if="row.type == 2">{{ $t('手动+扫码盘点') }}</span>
        </template>
      </el-table-column>

      <!-- 盘点/待盘点库位数量 -->
      <el-table-column align="center" show-overflow-tooltip prop="awaitNum" :label="$t('盘点/待盘点库位数量')" />
      <!-- 盘点差异 -->
      <el-table-column align="center" show-overflow-tooltip prop="difference" :label="$t('盘点差异')">
        <!--
            盘点差异：总数量差异
            差的话就红色负数
            多的话就绿色正数
            审核后出现
       -->
        <template slot-scope="{ row }">
          <div :style="{ color: row.difference >= 0 ? 'green' : 'red' }">
            {{ row.difference }}
          </div>
        </template>
      </el-table-column>
      <!-- 盈亏 -->
      <el-table-column align="center" show-overflow-tooltip prop="profitLoss" :label="$t('盈亏')">
        <!--
            盈亏：在审批后计算盈亏
            计算每个sku当前价格*差异的盈亏
            亏的话就红色负数
            盈的话就绿色正数
       -->
        <template slot-scope="{ row }">
          <div :style="{ color: row.profitLoss >= 0 ? 'green' : 'red' }">
            {{ row.profitLoss | thousand }}
          </div>
        </template>
      </el-table-column>
      <!-- 审核状态 -->
      <el-table-column align="center" show-overflow-tooltip prop="status" :label="$t('审核状态')" width="120">
        <!--
            1.未审核
            2.已审核
            3.取消盘点
            已审核后不能修改盘点明细信息
       -->
        <template slot-scope="{ row }">
          <span v-if="row.status == 1" style="color: red">{{ $t('未审核') }}</span>
          <span v-if="row.status == 2" style="color: green">{{ $t('已审核') }}</span>
          <span v-if="row.status == 3">{{ $t('取消盘点') }}</span>
        </template>
      </el-table-column>
      <!-- 备注 -->
      <el-table-column align="center" show-overflow-tooltip prop="remark" :label="$t('备注')" />
      <!-- 创建时间 -->
      <el-table-column align="center" width="200" show-overflow-tooltip prop="createTime" :label="$t('创建时间')" />
      <!-- 操作 -->
      <el-table-column align="center" fixed="right" :label="$t('操作')" :width="calWidth(350, 450, 350)">
        <!-- <span v-if="row.status == 3">{{ $t('取消盘点') }}</span> -->

        <template slot-scope="{ row }" v-show="row.status != 3">
          <el-button
            v-hasPermi="['distribution:stockCheck:updateStockCheckRemark']"
            type="text"
            size="small"
            @click="handleRemark(row)"
          >
            <!-- 修改备注 -->
            {{ $t('修改备注') }}
          </el-button>
          <!-- 已审核的才显示阴亏详情 -->
          <!-- status 1.未审核 2.已审核 3.取消盘点 -->
          <el-button
            type="text"
            v-show="row.status == 2"
            v-hasPermi="['distribution:stockCheck:getStockCheckProfitLoss']"
            size="small"
            @click="handleDetail(row.id)"
          >
            <!-- 盈亏详情 -->
            {{ $t('盈亏详情') }}
          </el-button>
          <el-button
            type="text"
            size="small"
            v-hasPermi="['distribution:stockCheck:getStockCheckDetailsXml']"
            @click="handleInventoryDetail(row)"
          >
            <!-- 盘点 -->
            {{ $t('盘点') }}
          </el-button>

          <!-- status 为1 时才有 审核 和 取消 -->
          <el-popconfirm
            v-show="row.status == 1"
            style="margin: 0 5px"
            v-hasPermi="['distribution:stockCheck:verify']"
            @confirm="handleVerify(row.id)"
            :title="$t('确定') + '?'"
            icon="el-icon-info"
          >
            <el-button slot="reference" type="text" size="small">
              <!-- 审核并更新总库存 -->
              {{ $t('审核并更新总库存') }}
            </el-button>
          </el-popconfirm>

          <el-popconfirm
            v-show="row.status == 1"
            v-hasPermi="['distribution:stockCheck:cancel']"
            @confirm="handleCancel(row.id)"
            :title="$t('确定') + '?'"
            icon="el-icon-info"
          >
            <el-button slot="reference" type="text" size="small">
              <!-- 盘点取消 -->
              {{ $t('盘点取消') }}
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 创建 -->
    <Create :show.sync="create.show" @close="getList" />
    <!-- 盈亏详情 -->
    <Detail :show.sync="detail.show" :id="detail.id" />
    <!-- 盘点 -->
    <Inventorys :show.sync="inventory.show" :id="inventory.id" :title="inventory.title" @getList="getList" />
    <!-- 修改备注 -->
    <EditRemark @close="getList" :show.sync="editRemark.show" :formData="editRemark.formData" />
  </div>
</template>

<script>
import { stockCheckList, verify, _cancel } from '@/api/distribution/sku/Inventory'
import Create from './components/create.vue'
import Detail from './components/detail.vue'
import Inventorys from './components/inventory/index.vue'
import EditRemark from './components/editRemark.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'Inventory',
  components: {
    Detail,
    Create,
    Inventorys,
    EditRemark,
  },
  data() {
    return {
      showSearch: false,
      /**盈亏详情 */
      detail: {
        show: false,
        id: '',
      },
      /**创建 */
      create: {
        show: false,
      },
      /**盘点 */
      inventory: {
        show: false,
        title: '',
        id: '',
      },
      /**盘点 */
      editRemark: {
        show: false,
        formData: {},
      },
      /**
       * 导入组件的显示与隐藏
       */
      showImport: false,
      showName: '',
      form: {},
      tableCheck: [],
      tableData: [],
      /**获取供应厂家列表  （厂家） */
      manufacturersList: [],
      showDialog: false,

      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  async created() {
    this.getList()
  },

  methods: {
    handleRemark(row) {
      this.editRemark.show = true
      this.editRemark.formData = JSON.parse(JSON.stringify(row))
    },
    handleVerify(id) {
      verify({ id }).then((res) => {
        const { code, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.getList()
        }
      })
    },
    handleCancel(id) {
      _cancel({ id }).then((res) => {
        const { code, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.getList()
        }
      })
    },

    relaod() {
      this.getList()
    },
    handleEdits(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformation')
    },
    handleDetail(id) {
      this.detail.show = true
      this.detail.id = id
    },
    handleAdd() {
      this.create.show = true
    },
    handleInventoryDetail(row) {
      this.inventory.show = true
      this.inventory.title = row.createTime
      this.inventory.id = row.id
    },

    handleDelete(id) {},

    // 取消申请
    cancel() {},
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      console.log(` ==>`, JSON.parse(JSON.stringify(this.queryParams)))
      stockCheckList(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped></style>
